<template>
    <div class="wrapEvent">
        <div class="header">
            <div class="c">

            </div>
            <div class="h">
                <div class="font">
                    <!-- <span :icon="Bell"></span> -->
                    <el-icon>
                        <Bell />
                    </el-icon>
                </div>
                <div class="headertitle">
                    <span class="new" v-if="store.$state.locale != 1">新上市</span>
                    <span class="newEn" v-if="store.$state.locale == 1">New Listing</span>
                </div>
            </div>

        </div>
        <div class="content">
            <li v-for="(item, index) in data.data" :key="index">
                <span>{{platformTo(item.listPlatform1) }}</span>
                <span>{{ item.logo }}</span>
                <span>{{ store.$state.locale == 1 ? item.name.split(";")[0] : item.name.split(";")[1] }}</span>
                <span class="number">({{ item.number }})</span>
            </li>
        </div>
    </div>
</template>

<script lang="ts">
export default {
    name: "XEvent",
};
</script>

<script lang="ts" setup>
import { ref, defineProps, onUpdated } from "vue";
import {
    Bell
} from '@element-plus/icons-vue'
import { ipoStore } from "@/stores/ipo"
import i18n from '@/locales'
import { getCurrentInstance } from 'vue'
const { proxy } = (getCurrentInstance() as any)
interface obj {
    logo: string,
    listPlatform1: string,
    name: string,
    number: string | number
}
const store = ipoStore();
const data = defineProps<{ data: obj[] }>()
const platformTo=(listPlatform1:string)=>{
    var str=""
    var obj={
        1: proxy.$t('home.Mainboard'),
        2: proxy.$t('home.GEM')
    }
    if (isValidKey(listPlatform1, obj)) {
      const code = obj[listPlatform1]

      str = code;
    }
    function isValidKey(
      key: string | number | symbol,
      object: object
    ): key is keyof typeof object {
      return key in object;
    }
    return str
}

</script>

<style lang="scss" scoped>
.wrapEvent {
    // margin-top: 20px;
    padding-left: 0px;
    overflow: hidden;
    width: 100%;
    height: 100%;
    border-top: 6px solid #D3DDE4;
    border-right: 6px solid #D3DDE4;
    border-left: 3px solid #D3DDE4;
    border-bottom: 2px solid #D3DDE4;
    box-sizing: border-box;
   // background-color: #DA8B2B;
    .header {
        margin-top: 4px;
        position: relative;
        // background-color: red;
        width: 100%;
        height: 45px;
       // transform: translateY(-40px);
       // margin-left: -30px;
       // z-index: 1;
        .c {
            width: 30px;
            height: 35px;
            background-color: #DA8B2B;
            transform: rotateX(26deg) rotateY(108deg);
            position: absolute;
            top: 0px;
            left: 0px;
        }

        .h {
            position: absolute;
            top: 10px;
            left: 10px;
            font-size: 14px;
            // width: 80px;
            padding-left: 10px;
            padding-right: 10px;
            height: 35px;
            background-color: #F3B72B;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;

            .font {
                // color: #fff;
                padding-top: 1.5px;
                font-size: 14px;
                // background-color: red;
                width: 10px;
                height: 10px;
                transform: translateY(-3px);
                margin-right: 5px;
            }

            .headertitle {
                .new {
                    font-size: 16px;
                }

                .newEn {
                    font-size: 20px;
                }
            }
        }

    }

    // /取消滚动条样式
    ::-webkit-scrollbar {
        display: none;
    }

    .content {
        margin-left: 22px;
        border-left: 3px solid #EEEFF1;
        height: 270px;
        padding-left: 25px;
       // overflow: scroll;
        overflow-y: scroll;
      //  background-color: red;
      @media screen and (max-width: 768px) {
        height: 30vh;
    }

        li {
            line-height: 50px;
            color: #888F95;
            border-bottom: 2px solid #EDEDED;
            font-size: 19px;
            .number {
                color: #9FA4A7;
                font-weight: 450;
                margin-left: 5px
            }
        }
    }

}
</style>